<template>
  <div class="marketing-method">
    <el-form label-width="120px">
      <!-- 营销方式选择 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="营销方式">
            <el-checkbox-group v-model="selectedMethods" @change="handleMethodChange">
              <el-checkbox 
                v-for="method in marketingMethods" 
                :key="method.value" 
                :label="method.value">
                {{ method.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 短信设置 -->
      <div v-if="selectedMethods.includes('sms')" class="method-config">
        <h4>短信设置</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="短信模板">
              <el-select v-model="smsTemplate" placeholder="请选择短信模板" style="width: 100%">
                <el-option
                  v-for="template in smsTemplates"
                  :key="template.value"
                  :label="template.label"
                  :value="template.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="短信内容">
              <el-input 
                v-model="smsContent" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入短信内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      
      <!-- 邮件设置 -->
      <div v-if="selectedMethods.includes('email')" class="method-config">
        <h4>邮件设置</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="邮件模板">
              <el-select v-model="emailTemplate" placeholder="请选择邮件模板" style="width: 100%">
                <el-option
                  v-for="template in emailTemplates"
                  :key="template.value"
                  :label="template.label"
                  :value="template.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="邮件主题">
              <el-input 
                v-model="emailSubject" 
                placeholder="请输入邮件主题">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="邮件内容">
              <el-input 
                v-model="emailContent" 
                type="textarea" 
                :rows="6" 
                placeholder="请输入邮件内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      
      <!-- 微信设置 -->
      <div v-if="selectedMethods.includes('wechat')" class="method-config">
        <h4>微信设置</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="微信模板">
              <el-select v-model="wechatTemplate" placeholder="请选择微信模板" style="width: 100%">
                <el-option
                  v-for="template in wechatTemplates"
                  :key="template.value"
                  :label="template.label"
                  :value="template.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="微信内容">
              <el-input 
                v-model="wechatContent" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入微信内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup name="MarketingMethod" lang="ts">
import { ref, watch, onMounted } from 'vue'

// 定义属性
const props = defineProps({
  modelValue: {
    type: String,
    default: '[]'
  }
})

// 定义事件
const emit = defineEmits(['update:modelValue'])

// 营销方式选项
const marketingMethods = ref([
  { value: 'sms', label: '短信' },
  { value: 'email', label: '邮件' },
  { value: 'wechat', label: '微信' }
])

// 选中的营销方式
const selectedMethods = ref([])

// 短信模板选项
const smsTemplates = ref([
  { value: '1', label: '促销活动模板' },
  { value: '2', label: '节日祝福模板' },
  { value: '3', label: '客户关怀模板' }
])

// 邮件模板选项
const emailTemplates = ref([
  { value: '1', label: '促销活动模板' },
  { value: '2', label: '节日祝福模板' },
  { value: '3', label: '客户关怀模板' }
])

// 微信模板选项
const wechatTemplates = ref([
  { value: '1', label: '促销活动模板' },
  { value: '2', label: '节日祝福模板' },
  { value: '3', label: '客户关怀模板' }
])

// 短信设置
const smsTemplate = ref('')
const smsContent = ref('')

// 邮件设置
const emailTemplate = ref('')
const emailSubject = ref('')
const emailContent = ref('')

// 微信设置
const wechatTemplate = ref('')
const wechatContent = ref('')

// 处理营销方式变化
function handleMethodChange() {
  updateModelValue()
}

// 更新模型值
function updateModelValue() {
  const marketingMethodsData = {
    methods: selectedMethods.value,
    sms: {
      template: smsTemplate.value,
      content: smsContent.value
    },
    email: {
      template: emailTemplate.value,
      subject: emailSubject.value,
      content: emailContent.value
    },
    wechat: {
      template: wechatTemplate.value,
      content: wechatContent.value
    }
  }
  emit('update:modelValue', JSON.stringify(marketingMethodsData))
}

// 监听所有数据变化并更新父组件
watch([selectedMethods, smsTemplate, smsContent, emailTemplate, emailSubject, emailContent, wechatTemplate, wechatContent], () => {
  updateModelValue()
})

// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
  if (newVal !== null && newVal !== undefined) {
    try {
      // 确保newVal是字符串类型
      let jsonString = '';
      if (typeof newVal === 'string') {
        jsonString = newVal;
      } else {
        // 如果不是字符串，先转换为JSON字符串
        jsonString = JSON.stringify(newVal);
      }
      
      // 确保jsonString不是空字符串
      if (jsonString.trim() === '') {
        // 如果是空字符串，使用默认值
        selectedMethods.value = []
        smsTemplate.value = ''
        smsContent.value = ''
        emailTemplate.value = ''
        emailSubject.value = ''
        emailContent.value = ''
        wechatTemplate.value = ''
        wechatContent.value = ''
        return
      }
      
      const marketingMethodsData = JSON.parse(jsonString)
      selectedMethods.value = marketingMethodsData.methods || []
      smsTemplate.value = marketingMethodsData.sms?.template || ''
      smsContent.value = marketingMethodsData.sms?.content || ''
      emailTemplate.value = marketingMethodsData.email?.template || ''
      emailSubject.value = marketingMethodsData.email?.subject || ''
      emailContent.value = marketingMethodsData.email?.content || ''
      wechatTemplate.value = marketingMethodsData.wechat?.template || ''
      wechatContent.value = marketingMethodsData.wechat?.content || ''
    } catch (e) {
      console.error('解析营销方式数据失败:', e)
      // 解析失败时使用默认值
      selectedMethods.value = []
      smsTemplate.value = ''
      smsContent.value = ''
      emailTemplate.value = ''
      emailSubject.value = ''
      emailContent.value = ''
      wechatTemplate.value = ''
      wechatContent.value = ''
    }
  } else {
    // newVal为null或undefined时，使用默认值
    selectedMethods.value = []
    smsTemplate.value = ''
    smsContent.value = ''
    emailTemplate.value = ''
    emailSubject.value = ''
    emailContent.value = ''
    wechatTemplate.value = ''
    wechatContent.value = ''
  }
}, { immediate: true })

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里添加初始化逻辑
})
</script>

<style scoped>
.marketing-method {
  padding: 20px;
}

.method-config {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.method-config h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}
</style>